<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			<uni-section title="维修信息" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="车牌号" required>
							<u--input v-model="formData.carPlateNo" placeholder="自动带出" disabled disabledColor="#fff">
							</u--input>
						</uni-forms-item>
						<uni-forms-item label="当前公里数" required>
							<u--input placeholder="请输入当前公里数" @input="checkMileage" type="digit" v-model="formData.useMileage">
							</u--input>
						</uni-forms-item>
						<uni-forms-item label="送车时间" required>
							<uni-datetime-picker type="date" v-model="formData.repairStartDate" />
						</uni-forms-item>
						<uni-forms-item label="维修厂" required>
							<view @click="showWxc=!showWxc">
								<u--input v-model="formData.serviceName" placeholder="请选择维修厂" suffixIcon="arrow-right"
									disabled disabledColor="#fff">
								</u--input>
							</view>
						</uni-forms-item>
						<uni-forms-item label="关联订单">
							<view @click="chooseOrder">
								<u--input v-model="formData.orderNo" placeholder="请选择关联订单" suffixIcon="arrow-right"
									disabled disabledColor="#fff">
								</u--input>
							</view>
						</uni-forms-item>
						<uni-forms-item label="维修项目" labelPosition="top">
							<view>
								<u--textarea v-model="formData.maintainRemark" placeholder="请输入500字以内的说明" count maxlength="500">
								</u--textarea>
							</view>
						</uni-forms-item>

					</uni-forms>
				</view>
			</uni-section>

		</view>
		<button type="info" class="sub-btn" @click="commit">提交</button>

		<!-- 维修厂 -->
		<u-picker :show="showWxc" :columns="supplierList" keyName="name" closeOnClickOverlay @close="showWxc = false"
			@cancel="showWxc = false" title="请选择维修厂" confirmColor="#1573FF" @confirm="confimWxc"></u-picker>
	</view>
</template>

<script>
	import {
		addRepairMaintain,getSupplierList
	} from '@/api/car-api.js'
	var moment = require('@/utils/moment.js');
	export default {

		data() {
			return {
				types: [{
					value: 2,
					text: '维修'
				}],
				showWxc: false,
				supplierList: [],
				formData: {
					carPlateNo: '',
					type: 2,
					repairStartDate: '',
					serviceName: '',
					serviceId: '',
					orderNo: '',
					maintainRemark: '',
					carId : '',
					useMileage:''

				}
			}
		},
		onLoad(op) {
			uni.$on('associatedOrder', (orderNo) => {
				this.formData.orderNo = orderNo;
			})
			this.formData.carPlateNo = op.carNo;
			this.formData.carId = op.carId;
			getSupplierList(2).then(response => {
				this.supplierList.push(response.data);
			});
		},
		methods: {
			checkMileage(e) {
				//正则表达试
				e = (e.match(/^\d*(\.?\d{0,2})/g)[0]) || null
			    this.$nextTick(()=>{
					this.formData.useMileage = e;
				})
			},
			// 选择维修厂
			confimWxc(e) {
				this.formData.serviceName = e.value[0].name;
				this.formData.serviceId = e.value[0].id;
				this.showWxc = false;
			},
			// 关联订单
			chooseOrder() {
				uni.navigateTo({
					url: '/car/repair/order?carId='+this.formData.carId
				})
			},

			// 提交维保信息
			commit() {
				if(uni.$u.test.isEmpty(this.formData.repairStartDate)){
					this.$u.toast('请选择送车时间');
					return
				}else if(uni.$u.test.isEmpty(this.formData.serviceName)) {
					this.$u.toast('请选择维修厂');
					return
				}else {
					this.formData.repairStartDate=moment(this.formData.repairStartDate).format('YYYY-MM-DD HH:mm:ss');
					addRepairMaintain(this.formData).then(response => {
						uni.$emit('refreshRepair');
						this.$u.toast("新增成功");
						uni.navigateBack({});
					});
				}
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>
